<template>
  <el-select
    :placeholder="fld.placeholder"
    :value='value'
    @input="handleModelInput"
    @change="handleChange"
    :clearable='fld.clearable'
    :filterable='fld.filterable'
    :multiple='fld.multiple'
    :disabled='fld.disabled'
    :collapse-tags='fld.multiple'
    size="mini"
    >
    <el-option-group
      v-for="group in fld.options"
      :key="group.text"
      :label="group.text">
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.text"
        :value="item.value">
      </el-option>
    </el-option-group>
    </el-option>
  </el-select>
</template>
<script>
define(['vue'],function(vue){
  return vue.component('comp-select-group',{
    template: template,
    // props:['fld','value'],
    props : {
      fld :{required:false,default:function(){
        return {name:'',size:'mini'}
      }},
      value :{required:false,default:function(){
        if(this.fld.multiple) return [];
        return '';
      }},
    },
    data : function(){
      if(this.fld.multiple && !Array.isArray(this.value)) {
        console.error('comp-select组件为多选属性，props中的value属性必须提供，且必须为数组，当前值为'+this.value,this.fld);
        // return false;
      }
      return {
        displayText:''
      };
      // var v = this.value;
      // return {
      //   myValue : v,
      // };
    },
    mounted : function () {
      // dump('select mount',this);
      // this.displayText = this.getDisplayText();
    },
    methods:{
      //得到描述
      getDisplayText : function(val) {
        if(!val) val = this.value;
        //根据option和value设置displayText,回显时需要用到
        var displayText='';
        if(!this.fld.multiple) {
          for(var i=0;this.fld.options[i];i++) {
            if(this.fld.options[i].value==val) {
              displayText = this.fld.options[i].text;
              break;
            }
          }
        } else {
          var temp = [];
          for(var j=0;val[j];j++) {
            for(var i=0;this.fld.options[i];i++) {
              if(this.fld.options[i].value==val[j]) {
                temp.push(this.fld.options[i].text);
              }
            }
          }
          displayText = temp.join(',');
        }
        return displayText;
      },
      handleModelInput :function(val){
        this.$emit("input", val);
        this.displayText = this.getDisplayText(val);
        //向总线提交事件，在mainson弹窗中，如果存在select控件，需要通过总线，改变cureentRow中的某个字段的值，用来显示在字表中
        //比如在弹框中选择了客户后，clientId改变的同时，必须在字表中显示对应客户的compName字段
        //构造需要传递的option
        var newVal = [];
        if(typeof(val)=='object') newVal = val;
        else newVal.push(val);
        var opt = [];
        for (var i=0;this.fld.options[i];i++) {
          var v = this.fld.options[i].value;
          if(newVal.indexOf(v)==-1) continue;
          opt.push(this.fld.options[i]);
        }
        this.$bus.$emit('selectChanged',this.fld.name,opt);
      },
      handleChange : function(item) {
        this.$emit("change", item,this);
        var key = `${this.fld.name}:change`;
        if(!this.$root.callbacks[key]) return;
        this.$root.callbacks[key].apply(this,arguments);
      }
    }
  });
});

</script>
